<script setup lang=ts>
import { ref } from 'vue';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import { formatNumber } from '@/home/utils/format';
import InfiniteMarquee from '@/home/components/InfiniteMarquee.vue';

const { $fetch } = useFetch();

const { data } = useAsyncData(
  'home:information:column',
  () => $fetch('/popSpecialColumn/getColumnPage',
    { method: 'post', data: { pageNum: 1, pageSize: 999 } },
  ),
  {
    transform: (data) => data.records ?? [],
  },
);
const marqueeSpeed = ref(0);

function updateMarqueeHeight(height: number) {
  marqueeSpeed.value = height > 480 ? 5 : 0;
}
</script>

<template>
  <section class="relative w-288 rounded-6 bg-[#fff] pb-36 pt-80 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)] before:(pointer-events-none absolute left-0 top-0 z-20 h-198 w-full bg-[linear-gradient(180deg,_rgba(0,154,255,0.09)_0%,_rgba(122,192,253,0)_100%)] content-empty)">
    <img src="@/home/assets/home/column.png" class="absolute left-24 top-18 block h-34 w-84">
    <img src="@/home/assets/home/info-logo.png" class="absolute right-89 top--16 z-100 block w-70">

    <div class="relative h-full overflow-hidden after:(pointer-events-none absolute bottom-0 left-0 z-10 h-24 bg-[linear-gradient(180deg,rgba(255,255,255,0)_0%,#fff_100%)] content-empty) before:(pointer-events-none absolute left-0 top-0 z-10 h-24 w-full bg-[linear-gradient(180deg,#fff_0%,rgba(255,255,255,0)_100%)] content-empty)">
      <InfiniteMarquee :speed="marqueeSpeed" @change-height="updateMarqueeHeight">
        <div class="mb-24 px-24 first-of-type:(mt-12)" v-for="item in data" :key="item.columnId">
          <RouterLink :to="`/column/detail/${item.columnId}`" target="_blank" class="group block">
            <div class="w-full flex-y-center justify-between gap-16">
              <h3 class="line-clamp-1 break-anywhere text-16 text-[#292929] font-500 leading-24 group-hover:(underline)" :title="item.columnName">
                {{ item.columnName }}
              </h3>
              <div class="flex-y-center flex-1 justify-end gap-4">
                <div class="i-icons:fire size-16 text-#E24E40"></div>
                <span class="text-14 text-[#575757] font-400 leading-16">{{ formatNumber(item.totalScore) }}</span>
              </div>
            </div>
          </RouterLink>
          <p class="line-clamp-2 mt-8 break-anywhere text-14 text-[#575757] font-400 leading-22">{{ item.columnDesc }}</p>
        </div>
      </InfiniteMarquee>
    </div>
  </section>
</template>

<style lang="scss" scoped>
</style>
